<template>
  <div id="app">
    <!-- <Header v-show="headShow"></Header>
    <router-view></router-view>
    <Footer v-show="headShow"></Footer> -->

    <Layout>
      <Header v-show="headShow"> </Header>
      <Content
        :style="{
          margin: '200px 20px 0'
        }"
      >
        <Icon
          class="moon"
          custom="iconfont icon-yueliang"
          size="130"
          color="#1afa29"
        />

        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </Content>
      <Footer v-show="headShow"></Footer>
    </Layout>
  </div>
</template>
<script>
import Header from './components/Header'
import Footer from './components/Footer'
import { startSakura } from '../public/Js/sukar'
export default {
  data() {
    return {
      headShow: true
    }
  },
  components: { Header, Footer },
  mounted() {
    startSakura()
  },
  created() {
    this.$store.dispatch('Init')
  },
  watch: {
    '$route.name'(val) {
      if (val == 'home') {
        this.headShow = false
      } else {
        this.headShow = true
      }
    }
  }
}
</script>
<style lang="scss">
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
}
#app {
  height: 100%;
}
#app .ivu-layout {
  height: 100%;
  background: $baseColor;
  // background-image: linear-gradient(#c8798e, #de8694, #eb8b8f, #f79d92);#0A3067
  background-image: linear-gradient(#04091d, #390c5d, #0d4082);
}
.moon {
  position: fixed;
  top: 5%;
  right: 8%;
}
#head {
  position: fixed;
  z-index: 1;
}
.ivu-layout-footer {
  background: transparent !important;
}
.title {
  color: $baseColor;
}
.ivu-layout-content {
  height: 100%;
}
</style>
